<template>
    <div class="cashList">
        <div class="title">
            {{ $t('assemble.现金兑换记录') }}
        </div>

        <div class="cashListBox">

            <div class="cashTop">
                <p> {{ $t('assemble.转账方式') }}</p>
                <p> {{ $t('assemble.兑换金额') }}</p>
                <p> {{ $t('assemble.比例金额') }}</p>
                <p> {{ $t('assemble.真实姓名') }}</p>
                <p> {{ $t('assemble.邮箱') }}</p>
                <p> {{ $t('assemble.状态') }}</p>
                <p> {{ $t('assemble.兑换时间') }}</p>
            </div>

            <div class="dataList">
                <div class="dataitem" v-for="(item, index) in cashData">
                    <p v-if="item.type == 1" style="width:200px;text-align: center;">{{ $t('assemble.EMT转账') }}</p>
                    <p v-if="item.type == 2" style="width:200px;text-align: center;">{{ $t('assemble.支票') }}</p>
                    <p style="width:200px;text-align: center;">{{ item.change_num }}</p>
                    <p style="width:200px;text-align: center;">{{ item.change_num_proportion }}</p>
                    <p style="width:100px;text-align: center;">{{ item.name }}</p>
                    <p style="width:200px;text-align: center;">{{ item.email }}</p>
                    <p v-if="item.status == 1" style="width: 100px; text-align: center;">{{ $t('assemble.已使用') }}</p>
                    <p v-if="item.status == 0" style="width: 100px; text-align: center;">{{ $t('assemble.未使用') }}</p>
                    <p style="width:200px;text-align: center;">{{ item.created_at }}</p>
                </div>
            </div>

            <div class="fenye">
                <el-pagination background layout="prev, pager, next" :page-size="this.pageInfo.pageSize"
                    :page-sizes="[5, 10, 15, 20]" :total="pageInfo.total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>

        </div>
    </div>
</template>
<script>
import { cashExchangeList } from "@/utils/api"
export default {
    data() {
        return {
            cashData: [
                {
                    type: "EMT转账",
                    change_num: "1956949",
                    name: "张三",
                    email: "2109761254@qq.com",
                    created_at: "2023-06-05 16:33:55",
                    status: "1",
                }
            ],
            pageInfo: {
                total: 0,
                page: 1,
                pageSize: 5
            },
        }
    },
    created() {
        this.getcashExchangeList()
    },
    methods: {
        async getcashExchangeList() {
            let res = await cashExchangeList({
                token: localStorage.getItem("token"),
                page: this.pageInfo.page,
                page_size: this.pageInfo.pageSize
            })
            if (res.code == 1000) {
                console.log("现金兑换记录", res)
                this.cashData = res.data.data
                this.pageInfo.total = res.data.total
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageInfo.page = val
            this.getcashExchangeList()
        },
    }

}
</script>
<style scoped lang="scss">
.fenye {
    margin-top: 50px;
    float: right;

    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #0057A7;
    }
}

.cashList {
    .title {
        font-size: 15px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 18px;
    }

    .cashListBox {
        padding: 30px;
        padding-bottom: 75px;
        background: #ffffff;
        margin-top: 30px;

        .cashTop {
            margin-top: 15px;
            display: flex;
            justify-content: space-between;

            p {
                font-size: 15px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #333333;
                line-height: 18px;

                &:nth-of-type(1) {
                    width: 200px;
                    text-align: center;
                }

                &:nth-of-type(2) {
                    width: 200px;
                    text-align: center;
                }
                &:nth-of-type(3) {
                    width: 200px;
                    text-align: center;
                }

                &:nth-of-type(4) {
                    width: 100px;
                    text-align: center;
                }

                &:nth-of-type(5) {
                    width: 200px;
                    text-align: center;
                }

                &:nth-of-type(6) {
                    width: 100px;
                    text-align: center;
                }

                &:nth-of-type(7) {
                    width: 200px;
                    text-align: center;
                }


            }
        }

        .dataList {
            .dataitem {
                display: flex;
                justify-content: space-between;
                width: 100%;
                height: 106px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 2px solid #F7F8FA;

                p {
                    font-size: 13px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 18px;
                }

            }
        }
    }

}
</style>